<template>
    <view class="fix-top-window">
        <view class="uni-header">
            <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
            <view class="uni-group">
                <uni-data-select @change="selectNamespace" v-model="searchValues.namespace" :localdata="namespaceRange"
                    placeholder="请选择命名空间" clear="true" style="width: 160px; margin-right: 10px;"></uni-data-select>
                <button class="uni-button hide-on-phone" type="default" size="mini" @click="clickSearch()"
                    style="margin-right: 15px;">搜索</button>
                <navigator :url="'./add'">
                    <button class="uni-button" type="primary" size="mini">添加</button>
                </navigator>
                <button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
                    @click="deleteByIds">批量删除</button>
            </view>
        </view>
        <view class="uni-container">
            <uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
                @selection-change="selectionChange">
                <uni-tr>
                    <uni-th width="150">命名空间</uni-th>
                    <uni-th width="180">工作负载</uni-th>
                    <uni-th>docker镜像地址</uni-th>
                    <uni-th align="center">当前部署镜像版本</uni-th>
                    <uni-th align="center">是否重新部署</uni-th>
                    <uni-th width="190" align="center">操作</uni-th>
                    <uni-th width="350" align="center">重新部署</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td>{{ item.namespace }}</uni-td>
                    <uni-td>{{ item.workloadName }}</uni-td>
                    <uni-td>{{ item.imageAddr }}</uni-td>
                    <uni-td width="170" align="center">{{ item.currentDeployImageTag }}</uni-td>
                    <uni-td width="120" align="center">{{ item.isRedeploy }}</uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <navigator :url="'./edit?item='+ encodeURIComponent(JSON.stringify(item))">
                                <button class="uni-button" type="primary" size="mini">编辑</button>
                            </navigator>
                            <button @click="deleteById(item.id, index)" class="uni-button" size="mini"
                                type="warn">删除</button>
                        </view>
                    </uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <uni-data-select :clear="true" v-model="item.selectedImageTag"
                                :localdata="item.imageTagsRange"></uni-data-select>
                            <button @click="cd(item)" class="uni-button" size="mini">重新部署</button>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
            <view class="uni-pagination-box">
                <uni-pagination show-icon show-page-size :page-size="pageSize" :pageSizeRange="pageSizeRange"
                    :current="pageNum" :total="total" @change="changePage" @pageSizeChange="changePageSize" />
            </view>
        </view>
    </view>
</template>

<script>
    import utils from "@/common/utils/utils.js"

    export default {
        data() {
            return {
                searchValues: {},
                namespaceRange: [],
                tableData: [],
                // 每页数据量
                pageSize: 10,
                pageSizeRange: [10, 20, 50, 200],
                // 当前页
                pageNum: 1,
                // 数据总量
                total: 0,
                loading: false,
                selectedIndexs: []
            }
        },
        onLoad() {
            this.selectedIndexs = []
            this.getNamespace()
            this.getData(1)
        },
        methods: {
            selectNamespace(e) {
                this.searchValues.namespace = e
            },
            // 多选处理
            selectedItems() {
                return this.selectedIndexs.map(i => this.tableData[i])
            },
            // 多选
            selectionChange(e) {
                console.log(e.detail.index)
                this.selectedIndexs = e.detail.index
            },
            // 分页触发
            changePage(e) {
                this.$refs.table.clearSelection()
                this.selectedIndexs.length = 0
                this.getData(e.current)
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize
                this.pageNum = 1
                this.$nextTick(() => {
                    this.getData(1);
                })
            },
            // 搜索
            clickSearch() {
                if (utils.isEmpty(this.searchValues)) {
                    uni.showToast({
                        title: "请添加搜索条件",
                        icon: "none"
                    })
                } else {
                    this.getData(1)
                }
            },
            // 获得命名空间
            getNamespace() {
                uni.request({
                    url: '/auth/v1/confRancher/listNamespace',
                    dataType: 'string',
                    success: (res) => {
                        let data = res.data.data;
                        for (var i = 0; i < data.length; i++) {
                            this.namespaceRange[i] = {
                                "value": data[i],
                                "text": data[i]
                            }
                        }
                    }
                });
            },
            // 获取数据
            getData(pageNum) {
                this.loading = true
                this.pageNum = pageNum
                let data = {
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize
                };
                if (this.searchValues.namespace != null) {
                    data.namespace = this.searchValues.namespace
                }

                uni.request({
                    url: '/auth/v1/workload/page',
                    dataType: 'string',
                    data: data,
                    success: (res) => {
                        let data = res.data.data;
                        this.pageNum = data.pageNum;
                        this.total = data.total;
                        let tableData = data.list;
                        for (var i = 0; i < tableData.length; i++) {
                            let imageTags = tableData[i].imageTags;
                            tableData[i].imageTagsRange = [];
                            for (var j = 0; j < imageTags.length; j++) {
                                tableData[i].imageTagsRange[j] = {
                                    "value": j,
                                    "text": imageTags[j]
                                }
                            }
                        }
                        this.tableData = [];
                        this.tableData = tableData;
                    }
                });
                this.loading = false
            },
            deleteById(id, index) {
                this.loading = true
                uni.request({
                    method: "DELETE",
                    url: '/auth/v1/workload/deleteById',
                    data: {
                        id: id
                    },
                    success: (res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '删除成功'
                            })
                        }
                    }
                });

                this.tableData.splice(index, 1)
                this.total = this.total - 1
                this.loading = false
                this.$refs.table.clearSelection()
            },
            // 批量删除
            deleteByIds() {
                this.loading = true
                let ids = [];
                let selectedItems = this.selectedItems();
                for (var i = 0; i < selectedItems.length; i++) {
                    ids[i] = selectedItems[i].id;
                }
                uni.request({
                    method: "DELETE",
                    url: '/auth/v1/workload/deleteByIds',
                    data: {
                        ids: ids
                    },
                    success: (res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '删除成功'
                            })
                        }
                    }
                });

                this.$refs.table.clearSelection()
                this.selectedIndexs.length = 0
                setTimeout(() => {
                    this.getData(1)
                }, 200)
            },
            cd(item) {
                this.loading = true
                uni.request({
                    method: "PUT",
                    url: '/devops/cd',
                    data: {
                        namespace: item.namespace,
                        workloadName: item.workloadName,
                        imageTag: item.imageTags[item.selectedImageTag]
                    },
                    success: (res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '部署成功'
                            })
                        }
                    }
                });
                this.loading = false
            }
        }
    }
</script>

<style lang="scss">
    .uni-group {
        display: flex;
        align-items: center;
    }
</style>